<template>
  <div>
    <GetBack :titles="'请注册'" />
    <div class="register">
      <van-form class="loginto" @submit="onSubmit" validate-first>
        <van-field
            v-model="accountNumber"
            name="账号"
            label="账号*"
            placeholder="请填写账号"
            :rules="[{ required: true }]"
        />
        <van-field
            v-model="username"
            name="昵称"
            label="昵称*"
            placeholder="请填写昵称"
            :rules="[{ required: true }]"
        />
        <div class="verificabig">
          <van-field
              v-model="modelNumber"
              name="pattern"
              label="手机号*"
              placeholder="请填写手机号"
              :rules="[{ pattern }]"
          />
          <van-button :disabled="isverification" @click.prevent="verificaNumber" class="verifica" type="primary"
                      size="mini">
            {{ isverification ? surplusTime : "发送验证码" }}
          </van-button>
        </div>
        <van-field
            v-model="verification"
            name="验证码"
            label="验证码*"
            placeholder="请填写验证码"
            :rules="[{ required: true }]"
        />

        <van-field
            v-model="passwordOne"
            type="password"
            name="密码"
            label="密码*"
            placeholder="请填写密码"
            :rules="[{ required: true }]"
        />
        <van-field
            v-model="passwordTwo"
            type="password"
            name="确认密码"
            label="确认密码*"
            placeholder="请再次确认密码"
            :rules="[{ required: true}]"
        />
        <div style="padding: 20px">
          <van-radio-group v-model="sex" direction="horizontal">
            性别：
            <van-radio name="0">男</van-radio>
            <van-radio name="1">女</van-radio>
          </van-radio-group>
        </div>
        <div style="padding: 10px">
          <textarea v-model="remark" placeholder="个人简介：" rows="5" cols="30">
          </textarea>
        </div>
        <div style="margin: 16px;">
          <van-button round block :to="isSkip?'/Logining':'/Register'" type="info" native-type="submit">注册</van-button>
        </div>

      </van-form>
    </div>
  </div>
</template>
<script>
import {getMobile, getRegisterAccount} from "@/api/index.api";
import Vue from 'vue';
import { Toast } from 'vant';
import GetBack from "@/components/GetBack";
Vue.use(Toast);
export default {
  name: "Register",
  data() {
    return {
      accountNumber: "",//账号
      username: '',//昵称
      modelNumber: "",//手机号
      pattern: /\d{11}/,
      verification: "",//验证码
      isverification: false,//是否请求验证码
      passwordOne: '',//密码
      passwordTwo: '',//密码
      surplusTime: 6,//验证码剩余时间
      sex: "0",
      remark:"",//个人简介
      isSkip:false
    };
  },
  methods: {
    //提交注册
    onSubmit(values) {
      if(this.passwordOne===this.passwordTwo){
        getRegisterAccount(this.accountNumber, this.username, this.modelNumber, this.verification, this.passwordTwo,this.sex,this.remark).then(res => {
          console.log(res.code)
          if(res.code===0){
            this.$router.push("/Logining")
          }else {
              this.$toast(res.msg)
          }
        })
      }else {
        Toast.fail({
          message: '请正确输入',
          position: 'top',
        });
      }
      console.log('submit', values);
    },
    //发送验证码
    verificaNumber() {
      if (!this.modelNumber.match(this.pattern)) {
        Toast.fail({
          message: '请正确输入手机号',
          position: 'top',
        });
      } else {
        this.isverification = !this.isverification
      }
    },
    //发送验证禁止提交时间
    verificaTime() {
      // 验证码接口
      getMobile(this.modelNumber).then(res => {
        console.log(res)
      })
      var timer = setInterval(() => {
        this.surplusTime--;
        if (this.surplusTime < 0) {
          this.surplusTime = 6;
          this.isverification = false
          clearInterval(timer)
        }
      }, 1000)
    }
  },
  watch: {
    // 提交验证码
    isverification(e) {
      if (e) {
        this.verificaTime()
      }
    }
  },
  components:{
    GetBack,
  }
}
</script>
<style lang="less" scoped>
.loginto {
  padding-top: 60px;
  .verificabig {
    position: relative;
    .verifica {
      position: absolute;
      top: 5px;
      right: 10px;
      height: 80%;
      width: 20%;
    }
  }
}
</style>